<template>
  <div class="homepage">
    <div class="company-info">
      <div class="company-desc">
        <subtitle zhTitle="关于我们" enTitle="ABOUT US"></subtitle>
        <p>此作品原本人物和图片是紧贴在一起的设计师使用了线框的元素，巧妙的使得整个标语和画面变得具有层次感。相同标语唯一水平,,,,,,垂直居中位置使得画面更加具有空间感此作品原本人物和图片是紧贴在一起的设计师使用了线框的元素，巧妙的使得整个标语和画面变得具有层次感。相同标语唯一水平垂直居中位置使得画面更加具有空间感。</p>
        <router-link to='/company-profile'><a href="javascript:void(0)" class="btn-one">查看更多<i class="long-arrow"></i></a></router-link>
      </div>
      <div class="company-img">
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1536633358&di=bc287014d2a85b4075329d3e1a654c58&src=http://img3.redocn.com/20140723/Redocn_2014072311541778.jpg" alt="">
      </div>
    </div>
    <div class="products-show">
      <subtitle zhTitle="产品展示" enTitle="PRODUCTS"></subtitle>
      <div class="product-list">
        <div class="product-nav">
          <ul>
            <li v-for="(item, index) in productNavList" :class="{active:selectNavIndex==index}" @click="getProducts(0,index)">{{item}}</li>
          </ul>
        </div>
        <div class="product-list-wrap" v-if='productList[selectNavIndex]'>
          <product-item v-for="(item, index) in productList[selectNavIndex]" :key="index" :info="item"></product-item>
        </div>
        <div class="more-wrap">
          <router-link to='/product-center'><a href="javascript:void(0)" class="btn-one">查看更多<i class="long-arrow"></i></a></router-link>
        </div>
      </div>
    </div>
    <div class="news">
      <subtitle zhTitle="新闻动态" enTitle="NEWS"></subtitle>
      <article-list :list="newsList" type="h"></article-list>
      <div class="more-wrap">
        <router-link to='/news-dynamic'><a href="javascript:void(0)" class="btn-one">查看更多<i class="long-arrow"></i></a></router-link>
        <!-- <a href="javascript:void(0);" class="btn-one">查看更多<i class="long-arrow"></i></a> -->
      </div>
    </div>
    <div class="aibo">
      <subtitle zhTitle="合作伙伴" enTitle="PARTNER"></subtitle>
      <div class="aibo-list">
        <div class="aibo-item" v-for="(item,index) in 6"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import subtitle from 'COMPS/subtitle.vue'
  import productItem from 'COMPS/product-item.vue'
  import articleList from 'COMPS/article-list/article-list.vue'
  import axios from 'axios'

  export default {
    name: 'homepage',
    components: {
      subtitle,
      productItem,
      articleList
    },
    data() {
      return {
        productNavList: ['热门产品','雷达','超声波','定位仪'],
        productList: [],
        selectNavIndex: 0,
        newsList: [{
          img: 'http://pic2.52pk.com/files/120815/1283314_162030_3708.jpg',
          title: '《怪物猎人：世界》IGN评分9.5分',
          content: '游戏中的狩猎场景非常广阔，即使没有玩家参与，几个独立的生态系统也能完美地运转。这片丰茂的世界有着无尽的可能性。更重要的是，你可以在这片土地上耗费很长一段时间，仿佛居住在这里一般。《怪物猎人》系列一直都会给玩家带来丰富多彩的内容。从宏观角度讲，这是一款单一模式循环的动作RPG游戏。和现在很多的采集制造类游戏一样，你一开只有一身破烂装备，然后你承接狩猎任务，从怪物以及它们的栖息地获取材料，打造更强一点的装备，然后穿上装备去狩猎更强的怪物，打造更多的装备。游戏的美妙之处在于它提供了许多途径帮助你完成这个循环。',
          date: '2018-02-05'
        },{
          img: 'http://pic2.52pk.com/files/120815/1283314_162030_3708.jpg',
          title: '《怪物猎人：世界》IGN评分9.5分',
          content: '游戏中的狩猎场景非常广阔，即使没有玩家参与，几个独立的生态系统也能完美地运转。这片丰茂的世界有着无尽的可能性。更重要的是，你可以在这片土地上耗费很长一段时间，仿佛居住在这里一般。《怪物猎人》系列一直都会给玩家带来丰富多彩的内容。从宏观角度讲，这是一款单一模式循环的动作RPG游戏。和现在很多的采集制造类游戏一样，你一开只有一身破烂装备，然后你承接狩猎任务，从怪物以及它们的栖息地获取材料，打造更强一点的装备，然后穿上装备去狩猎更强的怪物，打造更多的装备。游戏的美妙之处在于它提供了许多途径帮助你完成这个循环。',
          date: '2018-02-05'
        }],
      }
    },
    mounted() {
      this.getProducts(0,0);
    },
    methods: {
      /**
       * [getProducts 获取某类产品的产品列表]
       * @param  {none} type - 产品的类型
       * @param  {Number} index - 插入二位数组的下标
       */
      getProducts: function(type, index) {
        let that = this;
        this.selectNavIndex = index;
        if(this.productList[index]) {
          return;
        }
        if (window.DEBUGGING) {
          return new Promise(function(resolve) {
            resolve([{
              name: 'M--XC2bC雷达002',
              desc: '给你的产品添加一些简要的描述，尽量简单明了给你的产品添加一些简要的描述，尽量简单明了，最好不要超过三行字，最好不要超过三行字！',
              cover: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538022516518&di=b12f17edeac2cd8d10988200570ff318&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd8f9d72a6059252d85e4dd2c3f9b033b5bb5b923.jpg',
              price: '124.50'
            },{
              name: 'M--XC2bC雷达002',
              desc: '给你的产品添加一些简要的描述，尽量简单明了给你的产品添加一些简要的描述，尽量简单明了，最好不要超过三行字，最好不要超过三行字！',
              cover: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538022516518&di=b12f17edeac2cd8d10988200570ff318&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd8f9d72a6059252d85e4dd2c3f9b033b5bb5b923.jpg',
              price: '124.50'
            },{
              name: 'M--XC2bC雷达002',
              desc: '给你的产品添加一些简要的描述，尽量简单明了给你的产品添加一些简要的描述，尽量简单明了，最好不要超过三行字，最好不要超过三行字！',
              cover: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538022516518&di=b12f17edeac2cd8d10988200570ff318&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd8f9d72a6059252d85e4dd2c3f9b033b5bb5b923.jpg',
              price: '124.50'
            },{
              name: 'M--XC2bC雷达002',
              desc: '给你的产品添加一些简要的描述，尽量简单明了给你的产品添加一些简要的描述，尽量简单明了，最好不要超过三行字，最好不要超过三行字！',
              cover: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538022516518&di=b12f17edeac2cd8d10988200570ff318&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd8f9d72a6059252d85e4dd2c3f9b033b5bb5b923.jpg',
              price: '124.50'
            },{
              name: 'M--XC2bC雷达002',
              desc: '给你的产品添加一些简要的描述，尽量简单明了给你的产品添加一些简要的描述，尽量简单明了，最好不要超过三行字，最好不要超过三行字！',
              cover: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538022516518&di=b12f17edeac2cd8d10988200570ff318&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd8f9d72a6059252d85e4dd2c3f9b033b5bb5b923.jpg',
              price: '124.50'
            },{
              name: 'M--XC2bC雷达002',
              desc: '给你的产品添加一些简要的描述，尽量简单明了给你的产品添加一些简要的描述，尽量简单明了，最好不要超过三行字，最好不要超过三行字！',
              cover: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538022516518&di=b12f17edeac2cd8d10988200570ff318&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd8f9d72a6059252d85e4dd2c3f9b033b5bb5b923.jpg',
              price: '124.50'
            }])
          }).then(function(data) {
            console.log('发送请求'+index);
            // that.productList[index] = data;
            // 数组更新后用$set触发dom更新
            that.$set(that.productList, index, data);
          })
        }
        // todo: 获取产品列表
        // axios.post('',{
        //   params: {
        //     type: type
        //   }
        // }).then((data) => {
        //   that.$set(that.productList, index, data);
        // })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .homepage {
    margin-top: 100px;
    .more-wrap {
      text-align: right;
      margin-top: 20px;
    }
    .subtitle {
      margin-bottom: 50px;
    }

    .company-info {
      width: 100%;
      padding-bottom: 50px;
      border-bottom: 1px solid #ededed;
      .company-desc {
        position: relative;
        display: inline-block;
        width: 590px;
        height: 400px;
        margin-right: 60px;
        >p {
          .Mult-line(6);
          color: #888;
          line-height: 26px;
        }
        .btn-one {
          position: absolute;
          left: 0px;
          bottom: 25px;
        }
      }
      .company-img {
        display: inline-block;
        vertical-align: top;
        >img {
          width: 500px;
          height: 400px;
        }
      }
    }
    .products-show {
      text-align: center;
      margin-top: 70px;
      margin-bottom: 100px;
      padding: 0 40px;
      .product-list {
        .product-nav {
          text-align: left;
          margin-bottom: 50px;
          >ul {
            >li {
              cursor: pointer;
              display: inline-block;
              text-align: center;
              width: 120px;
              line-height: 40px;
              margin-right: 26px;
              color: #666;
              background-color: #f0f0f0;
              transition: all 0.2s;
              &.active {
                color: #fff;
                background-color: #47beda;
              }
              &:hover {
                color: #fff;
                background-color: #47beda;
              }
            }
          }
        }
        .product-list-wrap {   
          .product-item {
            margin-right: 35px;
            margin-bottom: 40px;
            &:nth-of-type(3n) {
              margin-right: 0px;
            }
          }
        }
      }
    }
    .news {
      text-align: center;
      margin-bottom: 100px;
    }
    .aibo {
      text-align: center;
      .subtitle {
        margin-bottom: 25px;
      }
      .aibo-list {
        .aibo-item {
          display: inline-block;
          margin: 25px;
          width: 320px;
          height: 150px;
          border: solid 1px #dcdcdc;
        }
      }
    }
  }
</style>